<div class="row">
	<div class="col-xs-12">
		<div class="box" id="user-app">
			<div class="box-header">
				<h3 class="box-title">用户管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名" v-model="userName">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search" @click="loadUserList()">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-add" @click="loadEditPage">添加</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>ID</th>
							<th>用户名</th>
							<th>邮箱</th>
							<th>手机号</th>
							<th>状态</th>
							<th>创建时间</th>
							<th>修改时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="user in userList">
							<td v-text="user.id">30</td>
							<td>{{user.username}}</td>
							<td>{{user.email}}</td>
							<td>{{user.mobile}}</td>
							<td>{{user.valid==1?'启用':'禁用'}}</td>
							<td>{{user.createdTimeStr}}</td>
							<td>{{user.modifiedTimeStr}}</td>
							<td>
								<button type="button" @click="changeValid(user.id,user.valid)">{{user.valid==1?'启用':'禁用'}}</button>
								<button type="button" @click="loadUserEdit(user.id)" >修改</button>
							</td>
						</tr>
					</tbody>

				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li :class="{disabled:pageInfo.isFirstPage}">
							<a href="#" aria-label="Previous"  @click.prevent="prePage()">
								<span aria-hidden="true" >上一页</span>
							</a>
						</li>
						<li v-for="n in pageInfo.navigatepageNums"
							:class="{active:n==pageInfo.pageNum}">
							<a href="#" @click.prevent="loadUserList(n)" >{{n}}</a>
						</li>
						<li :class="{disabled: pageInfo.isLastPage}">
							<a href="#" aria-label="Next" @click.prevent="nextPage()">
								<span aria-hidden="true">下一页</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
		var userApp= new Vue({
			el:'#user-app',
			data:{
				userName:'',
				userList:[],
				pageInfo:{}
			},
			methods:{
				loadUserList:function (page) {
					if(!page){
						page=1;
					}
					let username=this.userName;
					//发起请求
					axios({
						method:'get',
						url:'/sys-users/findUserList',
						params:{
							"username":username,
							"pageNum":page
						}
					}).then(res=> {
					//	console.log(res)
						let result=res.data;
						if(result.state==2000){
							//将数据加载到列表中
						//	console.log(result.data.list);
						//	userApp.userList=result.data.list;
							this.userList=result.data.list;
							this.pageInfo=result.data;
						}else{
							alert(result.message);
						}
					}).catch(e=>console.error(e.message))
				},
				nextPage:function () {
					if(this.pageInfo.hasNextPage){
						this.loadUserList(this.pageInfo.nextPage);
					}
				},
				prePage:function () {
					if(this.pageInfo.hasPreviousPage){
						this.loadUserList(this.pageInfo.prePage);
					}
				},
				loadEditPage:function () {
					$('#mainContentId').load("/sys/userEdit");
				},
				changeValid:function (userId,valid) {
					//改变用户状态
					valid=valid==1?0:1;
					//console.log(userId+","+valid)
					axios({
						url:'/sys-users/modifyUserValid',
						method:'post',
						params:{
							"userId":userId,
							"valid":valid
						}
					}).then(res=>{
						let result=res.data;
						if(result.state===2000){
							//刷新页面
							this.loadUserList(this.pageInfo.pageNum);
						}
					}).catch(e=>console.error(e.message))
				},
				loadUserEdit:function (userId) {
					//绑定userId的值
					$("#mainContentId").data("userId",userId);
					$("#mainContentId").load("/sys/userEdit");

				}
			},
			mounted(){
				//页面Html加载完成后,执行
				this.loadUserList();

			}
		})
</script>




